<template>
	<view class="flex flex-row flex-row-top-start" style="flex-flow: row wrap;"
		:style="[_width ? { width: _width + 'rpx' } : '']">
		<slot></slot>
	</view>
</template>

<script lang="ts" setup>
/**
 * 图片组
 * @description 注意它内部只能搭配图片组件tm-image才能正常。
 * @example 相册集例子
 * <tm-image-group>
		<tm-image :padding="[5,5]" preview :width="150" :height="150" :src="'https://picsum.photos/200/300?id='+item" v-for="item in 14" :key="item"></tm-image>
	</tm-image-group
 */
import { provide, computed } from "vue"
interface imageItem {
	width: number,
	height: number,
	src: string
}
const props = defineProps({
	//默认为0,宽度自动。
	width: {
		type: [Number, String],
		default: 0
	}
})
const _width = computed(() => props.width)

const _catchList: Array<imageItem> = [];
function pushKey(e: imageItem) {
	let index = _catchList.findIndex(el=>{
		return el.src==e.src;
	})
	if(index>-1){
		_catchList.splice(index,1,e);
	}else{
		_catchList.push(e);
	}
	
}
defineExpose({ pushKey: pushKey, tmImageGroup: 'tmImageGroup' });
provide('ImagGrupList', computed(() => {
	return _catchList.map(el => el.src);
}))
</script>
<style>
</style>
